﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>修改学生信息</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">设置我的资料</div>
        <div class="layui-card-body" pad15="">
          
          <div class="layui-form" lay-filter="">
            <div class="layui-form-item">
             
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">学号</label>
              <div class="layui-input-inline">
                <input type="text" name="student_id"  readonly="" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">不可修改</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="student_name" lay-verify="required"  autocomplete="off" placeholder="请输入姓名" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">专业</label>
                <div class="layui-input-inline">
                    <select name="major_name" class="majorSelect" lay-search lay-verify="required">
                        
                    </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                  <input type="text" name="student_id_card" lay-verify="required"  autocomplete="off" placeholder="请输入姓名" class="layui-input">
                </div>
              </div>
            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block" >
                <input type="radio" name="student_sex" value="男" title="男"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>男</div></div>
                <input type="radio" name="student_sex" value="女" title="女" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>女</div></div>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">头像</label>
              <div class="layui-input-inline">
                <input name="student_photo_path" lay-verify="required"  readonly=""   id="photoUploadPath" placeholder="图片地址" class="layui-input">
              </div>
              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button type="button" class="layui-btn layui-btn-primary" id="photoUpload">
                  <i class="layui-icon"></i>上传图片
                </button><input class="layui-upload-file" type="file" accept="" name="file">
                <!-- <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片</button> -->
              </div>
           </div>
            <div class="layui-form-item">
              <label class="layui-form-label">手机</label>
              <div class="layui-input-inline">
                <input type="text" name="student_tel" value="" lay-verify="phone" autocomplete="off" class="layui-input">
              </div>
            </div>
           
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" id="submitBtn" >确认修改</button>
               
              </div>
            </div>
          </div>
          
        </div>
      </div>
    <script>
        layui.use(['form', 'layedit', 'layer', 'jquery'], function ()
        {
            var form = layui.form,
                layedit = layui.layedit,
                layer = layui.layer,
                $ = layui.jquery;


            //专业
            var majorSet;
            $.ajax({
                url: '../operate/getSet.aspx',
                datatype: 'text',
                data: { "table": "tb_major" },
                success: function (res)
                {
                    //把数据填充到专业下拉框
                    majorSet = res;
                    var major = majorSet.split(',');
                    var html1 = '<dd lay-value="" class="layui-select-tips layui-this">直接选择或搜索选择</dd>';
                    var html2 = '<option value="" >直接选择或搜索选择</option>';
                    for (var i = 0; i < major.length; i++)
                    {
                        html1 += '<dd lay-value="' + major[i] + '">' + major[i] + '</dd>';
                        html2 += '<option value="' + major[i] + '">' + major[i] + '</option>';
                    }
                    var select = $(".majorSelect");
                    $(".majorSelect").next().children().eq(1).html(html1);//dd  是渲染代码
                    $(".majorSelect").html(html2); //option 选项代码
                    form.render();//没有写这个，操作后没有效果
                }
            });

            $.ajax({
                url: '../operate/getSet.aspx',
                datatype: 'text',
                data: { "table": "tb_student" },
                success: function (res)
                {
                    //填充数据
                    var data = res.split(',');
                    $("input[name='student_id']").val(data[0]);
                    $("input[name='student_name']").val(data[1]);
                    $("input[name='student_tel']").val(data[2]);
                    $("input[name='student_photo_path']").val(data[6]);
                    $("input[name='student_id_card']").val(data[5]);
                    $(".majorSelect").val(data[3]); form.render('select');
                    if (data[4] == "男")
                    {
                        $("input[name='student_sex'][title='男']").prop('checked', true);
                    }
                    else
                    {
                        $("input[name='student_sex'][title='女']").prop('checked', true);
                    }
                    form.render();
                }
               

            });

            $("#submitBtn").click(function ()
            {
                //判断是否为空
                if ($(".majorSelect").val() == "")
                {
                    layer.alert('专业不能为空');
                    return;
                }
                if ($("input[name='student_name']").val() == "")
                {
                    layer.alert('姓名不能为空');
                    return;
                }
                if ($("input[name='student_tel']").val() == "")
                {
                    layer.alert('电话不能为空');
                    return;
                }

                var para = {};
                para["table"] = "tb_student";
                var items = $(".layui-input");
                for (var i = 0; i < items.length ; i++)
                {
                    var key = items[i].name;
                    para[key] = items[i].value;
                }
                para['student_sex'] = $("input[type='radio'][name='student_sex']:checked").val();
                var a = $(".majorSelect")[0];
                var index = a.selectedIndex;
                para["major_name"] = a[index].text;
                delete para[""];
                $.ajax({
                    url: '../operate/changeInfo.aspx',
                    data: para,
                    success: function (res)
                    {
                        if (res > 0)
                        {
                            layer.alert('修改成功', { icon: 1 });
                        }
                        else
                        {
                            layer.alert('修改失败', { icon: 6 });
                        }
                    }

                });
            });

            //上传文件
            layui.use('upload', function ()
            {
                var upload = layui.upload;
                var formData = new FormData();
                //执行实例
                var uploadInst = upload.render({
                    elem: '#photoUpload' //绑定元素
                     , url: '../fileAspx/transFile.aspx', //上传接口
                    cache: false,//不需要缓存
                    processData: false,
                    contentType: false,
                    accept: 'images',
                    done: function (res)
                    {
                        //上传完毕回调
                        $("#photoUploadPath").val(res.data.src);//保存图片路径名称，然后存入数据库
                        alert("图片上传成功");
                    }
                  , error: function ()
                  {
                      //请求异常回调
                      alert("图片上传失败");
                  }
                });
            });

        })
    </script>
    
</body>
</html>
